<template>
  <Card>
    <p slot="title">修改密码</p>
    <Form ref="formInline" :model="formInline" :label-width="90" :rules="ruleInline">
      <Row>
        <Col span="5">
          <Row>
            <FormItem prop="old_password" label="原始密码">
              <Input type="text" v-model="formInline.old_password" placeholder="原始密码" />
            </FormItem>
          </Row>

          <Row>
            <FormItem prop="new_password" label="新密码">
              <Input type="text" v-model="formInline.new_password" placeholder="新密码" />
            </FormItem>
          </Row>

          <Row>
            <FormItem prop="new_password_confim" label="确认新密码">
              <Input type="text" v-model="formInline.new_password_confim" placeholder="确认新密码" />
            </FormItem>
          </Row>
        </Col>
      </Row>

      <FormItem>
        <Button type="primary" @click="handleSubmit('formInline')">修改</Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      formInline: {
        old_password: "",
        new_password: "",
        new_password_confim: ""
      },
      ruleInline: {
        old_password: [
          { required: true, message: "请填写密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur"
          }
        ],
        new_password: [
          { required: true, message: "请填写密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur"
          }
        ],
        new_password_confim: [
          { required: true, message: "请填写密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout () {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: 'login'
        })
      })
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
            let old_password = this.formInline.old_password.trim();
            let new_password = this.formInline.new_password.trim();
            let new_password_confim = this.formInline.new_password_confim.trim();
            if(new_password != new_password_confim) {
                 this.$Message.error("新密码和确认新密码不一致");
                return;
            }
            let self = this;
            this.jsonrpc.backend.user.updatePassword({
                "password_old": old_password,
                "password_new": new_password
            }).then((res) => {
                if(res.account) {
                    self.$Message.success("修改成功,请重新登录");
                    setTimeout(()=> {
                        self.logout();
                    },2000)
                }
            }).catch(error=> {
                self.$Message.error("修改失败，请稍后重试！");
            })
        } else {
          this.$Message.error("修改失败");
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped></style>